<template>
    <div class="inner-content list-content">
        <div class='title'>
            商品列表
        </div>
        <el-row v-if='!isManage' class='edit-tool'>
            <div class='search-group'>
                <input type='text'
                    v-model='searchText'
                    placeholder='搜索商品品牌'
                    @keyup.enter='onSearch'/><i class='icon' @click='onSearch'></i>
            </div><el-button class='btn-man' @click='managePro'>管理</el-button>
        </el-row>
        <el-row v-else type='flex' justify='end' class='edit-tool'>
            <el-checkbox :indeterminate='isIndeterminate' v-model='checkAll' @change='handleCheckAllChange'>全选</el-checkbox>
            <el-button class='delete' @click='deletePro'>删除选中</el-button>
            <el-button type='primary' @click='managePro'>完成</el-button>
        </el-row>
        <el-row style='margin-top:30px;'>
            <el-checkbox-group v-model='checkedPro'
                v-if='total'
                @change='handleCheckedProChange'
                style='position:relative;'>
                <card v-for="item in productList"
                      :item='item'
                      :isShowCheck='isManage'
                      :btnLabel="item.isEdit ? '完成' : '编辑'"
                      :label='item'
                      v-on:btnclick='changeEditStatus(item, $event)'
                      :maskVisible='item.status > 0 && item.status < 3'
                      :maskText='maskText(item.status)'></card>
            </el-checkbox-group>
            <div v-else class="empty-info">
              <p>您还没上传商品哦</p>
            </div>
        </el-row>
        <el-row v-show='total'>
            <div class="pagination">
                <el-pagination
                    @current-change='handleCurrentChange'
                    :page-size= 'size'
                    :current-page='page'
                    layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
    import ListJs from './List.js';
    module.exports = ListJs;
</script>

<style scoped lang='less'>
    @import url(List.less);
</style>
